<script setup>
import letterImg from '@/assets/letter.png'

defineProps({
  // 导航项
  navItem: {
    type: Array,
    default() {
      return [{ href: '/letter/', title: '返回首页' }]
    }
  }
})

const getBlank = (isBlank) => {
  if (isBlank === 'undefind') {
    return ''
  }
  if (isBlank) {
    return '_blank'
  } else {
    return ''
  }
}
</script>

<template>
  <div class="nav">
    <div class="box">
      <div class="left">
        <img :src="letterImg" alt="" />
        <el-text class="logo-text">给未来写封信</el-text>
        <div class="svg-box">
          <svg
            t="1730720132041"
            class="icon"
            viewBox="0 0 2112 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5238"
            data-spm-anchor-id="a313x.search_index.0.i5.5c783a81w4DyUp"
            width="40"
            height="40"
          >
            <path
              d="M320 0h1536c67.84 0 132.992 30.848 180.992 85.696S2112 214.976 2112 292.48v438.912c0 77.568-26.944 152-75.008 206.848C1988.992 993.152 1923.904 1024 1856 1024H0l32-96L64 832V292.544c0-77.568 26.944-152 75.008-206.848C187.008 30.848 252.096 0 320 0z"
              fill="#f8f8f8"
              p-id="5239"
              data-spm-anchor-id="a313x.search_index.0.i1.5c783a81w4DyUp"
              class="selected"
            ></path>
            <path
              d="M369.28 265.344V768h229.504c53.504 0 95.04-9.856 124.608-29.568 34.496-23.936 52.096-60.544 52.096-111.232 0-33.792-8.448-61.248-25.344-81.664-16.896-20.416-42.24-33.792-75.328-40.128 25.344-9.152 44.352-23.232 58.432-41.536 14.08-19.712 21.12-43.648 21.12-71.808 0-38.72-13.376-68.992-40.128-91.52-28.16-23.936-66.176-35.2-115.456-35.2H369.28z m76.736 63.36h133.76c33.792 0 59.136 5.632 74.624 17.6 15.488 11.264 23.232 29.568 23.232 54.912 0 26.752-7.744 46.464-23.232 59.136-15.488 11.968-40.832 18.304-76.032 18.304H446.016V328.704z m0 212.608h144.32c36.608 0 64.064 6.336 81.664 19.712 17.6 13.376 26.752 35.2 26.752 64.768 0 28.864-11.968 49.984-34.496 63.36-18.304 9.856-43.648 15.488-76.032 15.488H446.016V541.312z m553.728-147.136c-53.504 0-96.448 18.304-127.424 55.616-32.384 36.608-47.872 81.664-47.872 135.872 0 59.84 16.896 107.008 50.688 142.208 30.976 33.088 73.92 49.984 127.36 49.984 48.64 0 88.768-14.08 120.448-41.536 25.344-22.528 41.536-51.392 49.92-85.184h-74.56c-9.856 21.12-20.48 37.312-33.088 47.168-16.192 11.968-37.312 18.304-63.36 18.304-29.568 0-52.8-9.856-69.76-28.16-16.832-19.008-25.984-46.464-28.8-81.664h275.968c-0.704-64.768-15.488-115.456-43.648-152.064-30.976-40.832-76.8-60.544-135.872-60.544z m2.112 61.248c59.136 0 92.16 31.68 99.2 95.04h-196.352c4.224-30.976 14.72-54.208 30.272-70.4 16.896-16.896 38.72-24.64 66.88-24.64z m351.616-168.96l-74.624 30.976v86.592h-67.584v61.952h67.584v211.2c0 28.864 6.336 50.688 20.416 66.176 14.08 16.192 37.312 24.64 68.288 24.64h59.84v-61.952h-47.872a26.624 26.624 0 0 1-19.712-7.04c-4.224-4.928-6.4-11.968-6.4-21.824v-211.2h83.136v-61.952h-83.072V286.464z m307.2 107.712c-45.056 0-81.664 7.744-108.416 24.64-30.976 18.304-50.688 47.872-58.432 87.296l73.92 6.336c4.224-20.416 14.72-35.2 31.68-45.056 14.08-8.448 33.088-12.672 56.32-12.672 54.912 0 82.368 25.344 82.368 76.032v14.784l-81.664 2.112c-53.504 1.408-95.744 11.968-125.312 33.088-32.384 21.824-48.64 53.504-48.64 94.336 0 30.272 11.328 54.912 34.56 73.92 21.12 19.008 50.688 28.864 88.704 28.864 32.384 0 60.544-6.336 84.48-17.6 21.12-10.56 38.72-25.344 52.8-43.648V768h68.992V535.68c0-44.352-11.264-78.144-33.088-101.376-25.344-26.752-64.768-40.128-118.272-40.128z m77.44 205.568v21.12c0 28.16-11.968 52.096-34.56 71.104-22.464 19.008-49.28 28.864-80.896 28.864-19.008 0-34.56-4.928-45.76-14.08a41.152 41.152 0 0 1-17.6-34.496c0-45.056 33.792-68.992 102.08-70.4l76.736-2.112z"
              fill="#c9d0d4"
              p-id="5240"
              data-spm-anchor-id="a313x.search_index.0.i2.5c783a81w4DyUp"
              class=""
            ></path>
          </svg>
        </div>
      </div>
      <div class="right">
        <div class="list">
          <div>
            <el-link
              class="link"
              :href="item.href"
              :underline="false"
              v-for="item in navItem"
              :key="item"
              :target="getBlank(item.blank)"
            >
              {{ item.title }}
            </el-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.nav {
  height: 86px;
  display: flex;
  justify-content: center;
}
.box {
  height: 86px;
  width: 85%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 85%; */
}
.left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left img {
  width: 50px;
}
.logo-text {
  font-size: 30px;
  color: #2d414c;
  padding-left: 10px;
}

.svg-box svg {
  position: relative;
  top: -8px;
  left: 5px;
}

.link {
  margin-left: 20px;
}

/* a {
  color: #2d414c;
  transition: color 0.3s;
}
a:hover {
  color: #1890ff;
} */
</style>
